<template>
    <div style="background-color: #ffffff;">
        <!-- :before-change="beforeChange" -->
        <!-- <HeadNav :title="'新增原材料'" :leftArrow="true"></HeadNav> -->
        <!-- 周月年 -->
        <div class="content">
            <!-- <div class="pageEditTips">只可对单位/规格、数量、价格、状态进行修改，审核通过后数据才可进行更新。</div> -->
            <van-form @submit="onSubmit">
                <div class="recordList recordList_pb">
                    <!-- <div class="editInfoItem applyTime">
                        <div class="label">时间</div>
                        <div class="text">{{ currentDate }}</div>
                    </div> -->
                    <!-- <div class="editInfoItem applyTime">
                    <div class="label">原材料名称</div>
                    <div class="text">康师傅山药猪骨袋</div>
                </div> -->
                    <div class="editInfoItem required_item name">
                        <van-field v-model="currentDate" label="时间" />
                    </div>
                    <div class="editInfoItem required_item name">
                        <van-field v-model="rawMaterialInfo.materialName" label="原料名称" placeholder="填写原材料名称" required />
                    </div>
                    <div class="editInfoItem required_item name">
                        <van-field v-model="rawMaterialInfo.specification" label="规格" required placeholder="填写原材料规格"
                            :rules="[{ required: true, message: '请填写原材料规格' }]" />
                    </div>
                    <div class="editInfoItem required_item name">
                        <van-field v-model="rawMaterialInfo.unit" label="单位" required placeholder="填写原材料单位"
                            :rules="[{ required: true, message: '请填写原材料单位' }]" />
                    </div>
                    <div class="editInfoItem required_item name">
                        <van-field v-model="rawMaterialInfo.unitPrice" label="价格" required placeholder="填写原材料价格"
                            :rules="[{ required: true, message: '请填写原材料价格' }]" />
                    </div>
                    <div class="editInfoItem name status">
                        <van-field v-model="rawMaterialInfo.productionSite" label="产地" placeholder="厂家与品牌" />
                    </div>
                    <div class="editInfoItem name status">
                        <van-field v-model="rawMaterialInfo.remark" label="备注" placeholder="填写备注" />
                    </div>
                    <!-- <div class="editInfoItem name status">
                        <van-field v-model="rawMaterialInfo.status" label="状态" placeholder="填写原材料状态"
                            :right-icon="showSheet ? 'arrow-up' : 'arrow-down'" @click-right-icon="showSelectList" />
                    </div> -->
                </div>
                <div class="applyBtn">
                    <van-button type="primary" class="page_submit_btn" native-type="submit" >确认提交 </van-button>
                </div>
            </van-form>
        </div>
        <!-- <foot></foot> -->
        <van-popup v-model="showTipsSingle" :closeable="true" round style="width: 80%;padding-bottom: 24px;">
            <div class="top_title">你确认提交所填原材料信息吗？</div>
            <div class="sub_btn" @click="submitToApply">
                确定
            </div>
        </van-popup>
        <van-action-sheet v-model="showSheet" :actions="actions" @select="onSelect" cancel-text="取消"
            close-on-click-action @cancel="onCancel" />
    </div>
</template>

<script>
/* eslint-disable */
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
import foot from '../foot/foot.vue'
import { updateMaterialApplyApi} from '@/api/supplier'
import { Toast } from 'vant';


// 定义验证规则
const rules = {
    username: [
        { required: true, message: '用户名不能为空' },
        // { min: 3, message: '用户名长度不能少于 3 个字符' },
        // { max: 10, message: '用户名长度不能超过 10 个字符' }
    ]
};

export default {
    name: 'PreserveApply',
    components: {
        HeadNav,
        foot
    },
    computed: {
        // ...mapState({
        //     token: (state) => state.applyrecords.token
        // })
    },
    watch: {
        active(newVal) {
            console.log('newVal', newVal)
            if (newVal === 0) {

            } else if (newVal === 0) {

            } else {

            }
        }
    },
    data() {
        return {
            active: 0,
            loading: true,

            show: true,
            current: 0,
            currentItem: -1,
            showTipsSingle: false,
            popupItem: undefined,
            value: undefined,
            showSheet: false, //显示选择弹窗
            remarkMessage: undefined, //备注信息
            desMessage: undefined, //描述信息   
            actions: [
                { name: '启用' }, { name: '禁用' }
            ],  //选择列表   
            selectedFile: null,      // 用户选择的文件 
            uploadedImage: null, // 用于存储上传的图片    
            rawMaterialInfo: {
                materialName: undefined, //原材料名称
                status: 'enable', //原材料状态
                unitPrice: undefined, //价格
                unit: undefined,//单位
                specification: undefined, //规格
                productionSite: undefined, //厂家
                remark:undefined, //备注
            },
            currentDate: '', //当前时间
            rules
        }
    },

    // beforeRouteEnter(to, from, next) {
    //     next((vm) => {
    //     vm.localData = JSON.parse(to.query.item)
    //     })
    // },
    mounted() {
        this.loading = false

        const timestamp = new Date().getTime();
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        // 获取小时、分钟和秒数，并确保它们为两位数
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        // 拼接日期和时间
        this.currentDate = `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
        console.log(this.currentDate, 'this.currentDate');
    },
    created() {

    },

    methods: {
        // base64转blob
        dataURLtoBlob(dataurl) {
            var bstr = atob(dataurl),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr]);
        },

        // 页面的确认按钮
        onSubmit(values) {
            console.log(values);
            this.popupItem = values
            this.showTipsSingle = true
        },
        // 申请弹窗按钮
        submitToApply() {
            console.log();
            console.log(this.rawMaterialInfo)
            const params = { ...this.rawMaterialInfo}
            params.lastAgreeId = null
            // const params = {
            //     // materialId:this.materialId,  //新增不写
            //     materialName: this.rawMaterialInfo.materialName, //原材料名称
            //     status: this.rawMaterialInfo.status, //原材料状态
            //     unitPrice: this.rawMaterialInfo.unitPrice, //价格
            //     unit: this.rawMaterialInfo.unit,//单位
            //     specification: this.rawMaterialInfo.specification, //规格
            //     productionSite: this.rawMaterialInfo.placeholder, //厂家
            //     remark:this.rawMaterialInfo.remark, //备注
            //     lastAgreeId: this.rawMaterialInfo.applyId
            // }
            console.log(params,'params')
            updateMaterialApplyApi(params).then(res=>{
                if(res.code ===200){
                    Toast('添加成功！')
                    this.showTipsSingle = false
                    this.$router.push('/rawMaterial')
                }
            })
        },

        toCheck() { },
        // 申报明细
        showDetail(item, val) {
            console.log(item, val, 'xinxi ')
            this.currentItem = val
            this.show = !this.show
            item.isChecked = !item.isChecked
        },
        changeSort(index, e, name) {
            this.current = index
            // this._outToday()
        },
        // 确认修改
        toPreserveApply() {
            this.$route.push({
                path: '/preserveDishes'
            })
        },
        // 显示选择列表
        showSelectList() {
            this.showSheet = true
        },
        // 选择
        onSelect(item) {
            // 默认情况下点击选项时不会自动收起
            // 可以通过 close-on-click-action 属性开启自动收起
            this.showSheet = false;
            // Toast(item.name);
            this.rawMaterialInfo.status = item.name
        },
        //取消  --- 关闭弹窗
        onCancel() {
            Toast('取消')
            this.showSheet = false
        },


    },
    beforeDestroy() {
        console.log('index')
        window.removeEventListener('scroll', this.onLoad, true)
    }
}
</script>

<style lang="less" scoped>
span,
p {
    padding: 0;
    margin: 0;
}


.content {
    overflow: hidden;
    margin-bottom: 10px;
    background: #ffffff;
    height: 100%;
    // padding-bottom: 50px;
    margin-top: 48px;

}

// 页面提示
.pageEditTips {
    padding: 24px;
    color: #999999;
    font-size: 10px;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
}

.recordList {
    background: #ffffff;
    // padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;

    // height: 100%;
    // overflow: auto;
    .applyTime {
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    .name {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .label {
        font-size: 13px;
        color: #999999;
        line-height: 13px;
        width: 80px;
    }

    .text {
        font-size: 13px;
        color: #000000;
        line-height: 13px;
        margin-left: 10px;
    }

    ::v-deep .name .van-cell {
        padding: 0px;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e5e5e5;
    }

    ::v-deep .applyTime .van-cell {
        padding: 0px;
        height: 50px;
        line-height: 50px;
        border-bottom: none;
    }

    ::v-deep .required_item .van-cell__title,
    .van-field__label {
        font-size: 13px;
        color: #999999;
        width: 80px;
        padding-left: 10px;
    }

    ::v-deep .status .van-cell__title,
    .van-field__label {
        font-size: 13px;
        color: #999999;
        width: 80px;
    }

    ::v-deep .van-cell--required::before {
        left: 0;
    }

    ::v-deep .van-field__value {
        color: #000000 !important;
        font-size: 13px;
    }

    ::v-deep .van-field__control {
        color: #000000 !important;
        font-size: 13px;
    }

    ::v-deep .van-field__control:disabled {
        -webkit-text-fill-color: #000000;
    }

    ::v-deep .van-cell::after {
        border: none !important;
    }

}

.recordList_pb {
    // padding-bottom: 70px;
}

// 确认填报
.applyBtn {
    padding: 24px;
}

.page_submit_btn {
    width: 100%;
    height: 45px;
    border: none;
    color: #fff;
    font-size: 15px;
    background: #047DCB;
    border-radius: 45px;
    text-align: center;
}

/*清浮动*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.clearfix {
    zoom: 1;
}

// 无数据
.empty_content {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #000000;
    font-size: 16px;
    background: #ffffff;
}

.mr12 {
    margin-right: 12px;
}

.mt19 {
    margin-top: 19px;
}

// 弹窗
.top_title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #000;
    font-size: 15px;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 30px;
}

// 弹出按钮
.sub_btn {
    width: 80%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 22px;
    color: #fff;
    background: #047DCB;
    margin: 8px auto;
    font-size: 15px;
}
</style>